import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { ProductCard } from "react-vant";
import http from "../../api/http";
import { InfiniteScroll } from "antd-mobile";
function Index() {
  const navigate = useNavigate();
  const [list, setlist] = useState([]);
  const [page, setpage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const getList = async () => {
    const res = await http.get("/api/list", { params: { page } });
    const { data } = res.data;
    console.log(data);
    setlist([...list, ...data]);
    setpage((pre) => pre + 1);

    if (data.length === 0) {
      setHasMore(false);
    }
  };
  useEffect(() => {
    getList();
  }, []);
  return (
    <div>
      <NavBar onBack={() => navigate("/")}>更多</NavBar>
      {list?.map((item, ind) => (
        <ProductCard
          key={ind}
          num={item.id}
          price={item.price}
          desc={item.date}
          title={item.title}
          thumb={item.image}
        />
      ))}
      <InfiniteScroll loadMore={getList} hasMore={hasMore} />
    </div>
  );
}

export default Index;
